<template>
  <div class="times-area">
    <MNav :navs="navs" />
    <el-container>
      <el-main class="mg20">
        <el-timeline>
          <el-timeline-item
            class="tl"
            placement="top"
            size="large"
            :hollow="true"
            type="success"
            :timestamp="item.date"
            v-for="(item, index) in timestamps"
            v-bind:key="item.index"
          >
            <p class="tl">
              <span>{{ item.update_user }} 提交了一篇博客笔记</span>
              <a
                class="blog-link ml5"
                href="javascript:void();"
                @click="toDetail(item)"
                >{{ item.title }}</a
              >
              <br />
            </p>
          </el-timeline-item>
        </el-timeline>
      </el-main>
      <el-aside class="main-slide">
        <Intro name="读书感悟" :text="text" />
      </el-aside>
    </el-container>
  </div>
</template>
<script>
import Intro from "@/views/components/intro.vue";
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import MNav from "./components/nav";
import beforeRouteEnter from "@/common/beforeRouteEnter.js";
import request from "@/request/index";
import dateFmt from "../utils/date-fmt";
import { stringify } from "qs";
import texts from "@/common/wonder-texts.js";
const ctext = texts[Math.floor(Math.random() * 13)];
export default {
  name: "time-node",
  setup() {
    const router = useRouter();
    const timestamps = ref([]),
      text = ref(ctext),
      navs = ref([]);

    const timeColor = (index) => {
      return [
        "#EF5350",
        "#AB47BC",
        "#7E57C2",
        "#5C6BC0",
        "#42A5F5",
        "#29B6F6",
        "#26C6DA",
        "#26A69A",
        "#66BB6A",
        "#9CCC65",
        "#D4E157",
        "#FFEE58",
        "#FFA726",
        "#FF7043",
        "#BDBDBD",
      ][index % 15];
    };
    const toDetail = (item) => {
      // router.push({ name: "detail", params: { blog: stringify(item) } });
      router.push({
        name: "detail",
        query: { id: item._id, type: item.file.type, title: item.title },
        params: { title: item.title },
      });
    };

    request
      .get("/blog/list", { sortField: "update_date", order: -1 })
      .then((response) => {
        var times = response.data;
        times.forEach((item) => {
          item.date = dateFmt(new Date(item.update_date), "yyyy-MM-dd HH:mm");
          item.update_date = dateFmt(
            new Date(item.update_date),
            "yyyy-MM-dd HH:mm:ss"
          );
        });
        timestamps.value = times;
      });

    return {
      timestamps,
      text,
      navs,
      timeColor,
      toDetail,
    };
  },
  components: {
    Intro,
    MNav,
  },
  beforeRouteEnter(to, from, next) {
    beforeRouteEnter(to, from, next);
  },
};
</script>
<style lang="scss" scoped>
.blog-link {
  color: #4db6ac;
  text-decoration: underline;
  font-weight: bolder;
}
.main-slide {
  width: 260px;
}
</style>
